<template>
  <teleport to="body" v-if="visual">
    <div class="box">
      <div class="dialog">
        <slot name="header">
          <div class="header">
            <template v-if="title">
              {{title}}
            </template>
            <el-icon class="closeIcon"
                     @click.stop="closeDialog"
                     color="grey">
              <Close />
            </el-icon>
          </div>
        </slot>

        <!--default slot-->
        <slot ></slot>

        <slot name="footer">

        </slot>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  name: "Dialog",
  props:{
    visual:{
      type:Boolean,
      required:true
    },
    height:{
      type:String,
      required: false,
      default:'400px'
    },
    width:{
      type:String,
      required:false,
      default: '500px'
    },
    title:{
      type:String,
      required:false
    }
  },
  setup(pros,context){
    const closeDialog=()=>{
      context.emit('update:visual',false);
    };
    return{
      closeDialog
    }
  }
}
</script>

<style scoped>
.box{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(0,0,0,0.5);
}
.dialog{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  height: v-bind(height);
  width: v-bind(width);
  background-color: white;
}
.header{
  --height: 40px;
  height: var(--height);
  background-color: #dff3fb;
  line-height: var(--height);
  font-size:20px;
  letter-spacing: 10px;
  text-align: center;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}
.closeIcon{
  position: absolute;
  right: 6px;
  top: 6px;
  cursor: pointer;
}

</style>
